<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <style>
        body {
            background-color: antiquewhite;
        }

        #app {
            background-color: aliceblue;
            width: 600px;
            height: 400px;
            margin: 50px auto;
            position: relative;
            padding: 20px 20px;
        }

        input[type='button'] {
            width: 120px;
            height: 35px;
        }

        body div div {
            float: right;
        }

        p {
            text-align: center;
        }

        p, input {
            position: relative;
        }
    </style>
</head>
<body>
<!--vm 将控制这块区域， view -->
<div id="app">
    <p>{{ msg }}</p>
    <div>
        <input type="button" value="start" @click="run">
        <input type="button" value="stop" @click="stop">
    </div>
</div>
<!--引入vue.js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: '跑马灯，溜起来',
            timer: null,
        },
        methods: {
            run() {
                if (this.timer != null) return;
                // 注意如果不是lambda表达式形式，内部函数不能用this,要设置一个变量，函数内部引用
                // var _this = this;
                this.timer = setInterval(() => {
                    let one = this.msg.substring(0, 1);
                    let other = this.msg.substring(1);
                    // vue自动监听数据变化更新到界面上
                    this.msg = other + one;
                }, 200);
                console.log('start');
            },
            stop() {
                // 停止
                console.log('stop');
                clearInterval(this.timer);
                this.timer = null;
            }
        }
    })
</script>
</body>
</html>
